<template>
    <div class="login-box">
        <!-- 表单的名称改成loginForm -->
        <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px"
                 class="demo-ruleForm">

            <el-form-item label="登录账号:" prop="userName">
                <el-input type="text" v-model="loginForm.userName" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="登录密码" prop="password">
                <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>


            <el-row :gutter="20">
                <el-col :span="10" :offset="2">
                    <el-image style="width: 200px; height: 90px" :src="loginForm.imgUrl" fit="fit"></el-image>
                </el-col>

                <el-col :span="6" :offset="2">
                    <el-input style="margin-top: 20px" type="text" v-model="loginForm.code"
                              autocomplete="off"></el-input>
                </el-col>

            </el-row>

            <el-form-item style="margin-top: 30px">
                <el-col :span="6" :offset="2">
                    <el-button type="primary" @click="submitForm('loginForm')">确定登录</el-button>
                </el-col>

                <el-col :span="6" :offset="3">
                    <el-button @click="resetForm('loginForm')">重置数据</el-button>
                </el-col>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>

import {Message} from "element-ui";

export default {
    name: "LoginView",
    data() {
        let checkUserName = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('用户名不能为空'));
            } else {
                callback();
            }
        };
        let validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                callback();
            }
        };
        return {
            loginForm: {
                userName: '',
                password: '',
                imgUrl: '',
                code: ""
            },
            rules: {
                userName: [
                    {validator: checkUserName, trigger: 'blur'}
                ],
                password: [
                    {validator: validatePass, trigger: 'blur'}
                ]
            }
        };
    },
    methods: {
        submitForm(formName) {
            console.log("----login----", formName);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log("---- 验证通过，可以登录 ----")
                    let url = "/api/login"

                    let params = new URLSearchParams();
                    params.append("userName", this.loginForm.userName);
                    params.append("password", this.loginForm.password);

                    this.$axios.post(url, params)
                        .then(res => {
                            console.log(res.headers)
                            if (res.data.status == 200) {
                                Message({
                                    type: "success",
                                    message: res.data.message,
                                    duration: 1000
                                })
                                // 得到响应头中的token
                                // let token = res.headers['authentication'];
                                // let token = res.headers['token'];
                                // const token = res.headers.get('Authorization');
                                // 把token存在本地缓存里
                                // sessionStorage.setItem("token", token);

                                sessionStorage.setItem("loginName", this.loginForm.userName);

                                //  登录成功之后，跳到MainView视图
                                this.$router.push("/welcome")

                            } else {
                                Message({
                                    type: "error",
                                    message: res.data.message,
                                    duration: 1000
                                })
                            }
                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        getCode() {
            this.$axios.get("http://localhost:8098/code/getCode")
                .then(res => {
                    if (res.data.status == 200) {
                        this.loginForm.imgUrl = res.data.data.codeImg;
                    }
                })
        }
    },
    created() {
        this.getCode();
    }
}
</script>

<style scoped>

</style>
